<template>
  <el-row>
    <el-button type="primary" @click="add()" style="width: 120px;">添加</el-button>
  </el-row>
  <el-row>
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column label="资产编号" prop="caId" />
      <el-table-column label="所属小区" prop="caCellId" />
      <el-table-column label="设备名" prop="caName" />
      <el-table-column label="设备品牌" prop="caBrand" />
      <el-table-column label="设备单价" prop="caPrice" />
      <el-table-column label="设备数量" prop="caCount" />
      <el-table-column label="预计使用年限" prop="caUserYear" />
      <el-table-column label="购买时间" prop="caBuyTime" >
        <template v-slot="{ row }">
        {{formatDate(row.caBuyTime)}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="caCreateTime" >
        <template v-slot="{ row }">
        {{formatDate(row.caCreateTime)}}
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #default="scope">
          <el-button type="success" plain @click="editData(scope.row)">更新</el-button>
          <el-button type="danger" plain @click="Delete(scope.row.caId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
      v-model:current-page="currentPage"
       v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zhonshul"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-row>
    <!-- 添加模态框 -->
    <el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="form">
        <el-form-item label="资产编号" :label-width="formLabelWidth">
         <el-input v-model="form.caId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属小区" :label-width="formLabelWidth">
         <el-input v-model="form.caCellId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备名" :label-width="formLabelWidth">
         <el-input v-model="form.caName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备品牌" :label-width="formLabelWidth">
        <el-input v-model="form.caBrand" autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备单价" :label-width="formLabelWidth">
        <el-input v-model="form.caPrice" autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备数量" :label-width="formLabelWidth">
        <el-input v-model="form.caCount" autocomplete="off" />
      </el-form-item>
      <el-form-item label="预计使用年限" :label-width="formLabelWidth">
        <el-input v-model="form.caUserYear" autocomplete="off" />
      </el-form-item>
      <el-form-item label="购买时间" :label-width="formLabelWidth">
        <el-date-picker style="width: 400px;" type="datetime" v-model="form.caBuyTime"  placeholder="选择日期时间" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-date-picker style="width: 400px;" type="datetime" v-model="form.caCreateTime"  placeholder="选择日期时间" />
      </el-form-item>
    </el-form>
     <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addData()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑模态框 -->
      <el-dialog
        v-model="editDialogVisible" title="编辑" width="500" align-center>
        <el-form :model="editForm">
        <el-form-item label="资产编号">
            <el-input v-model="editForm.caId" />
          </el-form-item>
         <el-form-item label="所属小区">
            <el-input v-model="editForm.caCellId" />
          </el-form-item>
          <el-form-item label="设备名">
            <el-input v-model="editForm.caName" />
          </el-form-item>
          <el-form-item label="设备品牌">
            <el-input v-model="editForm.caBrand" />
          </el-form-item>
          <el-form-item label="设备单价">
            <el-input v-model="editForm.caPrice" />
          </el-form-item>
          <el-form-item label="设备数量">
            <el-input v-model="editForm.caCount" />
          </el-form-item>
          <el-form-item label="预计使用年限">
            <el-input v-model="editForm.caUserYear" />
          </el-form-item>
          <el-form-item label="购买时间">
          <el-date-picker style="width: 400px;" type="datetime" v-model="editForm.caBuyTime"  placeholder="选择日期时间" />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker style="width: 400px;" type="datetime" v-model="editForm.caCreateTime"  placeholder="选择日期时间" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeEditDialog">关闭</el-button>
            <el-button type="primary" @click="updateData">保存</el-button>
          </span>
        </template>
      </el-dialog>
  </template>
  
  
  <script setup>
  import { ref, reactive, onMounted ,toRaw} from "vue";
  import { ElMessage } from "element-plus";
  import axios from "axios";
  
  const zhonshul = ref(0);
  // 当前页码
  const currentPage = ref(1);
  //当前页数量
  const pageSize = ref(5);
  //查询名称
  const search = ref("");
  const filterTableData = ref([]);
  const editDialogVisible = ref(false);//编辑弹窗
  const dialogFormVisible = ref(false);
  const form = ref({
            caCellId:0,
            caName: "",
            caId:"",
            caBrand:"",
            caPrice:0,
            caCount:0,
            caUserYear: 0,
            caBuyTime: "",
            caCreateTime: ""
  });
  const editForm = reactive({
            caCellId:0,
            caName: "",
            caId:"",
            caBrand:"",
            caPrice:0,
            caCount:0,
            caUserYear: 0,
            caBuyTime: "",
            caCreateTime: ""
  });
  onMounted(() => {
    cx();
  });
  //添加按钮
  function add() {
    form.value = {        // 在确认添加后清空表单数据
        caCellId:"",
            caName: "",
            caId:"",
            caBrand:"",
            caPrice:"",
            caCount:"",
            caUserYear: "",
            caBuyTime: "",
            caCreateTime: ""
          };
    dialogFormVisible.value = true;
  }
  //添加功能
  const addData = () => {
    //添加信息
    axios
      .post("/api/api/Assets", toRaw(form.value))
      .then((response) => {
        console.log(response.data);
        if (response.data === 1) {
    ElMessage.success("添加成功");
    dialogFormVisible.value = false; // 关闭对话框
    cx(); // 刷新页面数据
  } else {
    ElMessage.error("添加失败，请重试！");
  }
      })
     
  };
  //编辑功能
  const updateData = () => {
    axios
      .put(
        `/api/api/Assets/?id=${editForm.caId}`,toRaw(editForm)
      )
      .then(function (response) {
        editForm.caId = "";
        editForm.caCellId=0;
        editForm.caName = "";
        editForm.caBrand = "";
        editForm.caPrice = 0;
        editForm.caCount = 0;
        editForm.caUserYear = 0;
        editForm.caBuyTime = "";
        editForm.caCreateTime = "";
        console.log(response.data);
        if (response.data) {
          ElMessage({
            message: "更新成功",
            type: "success",
          });
          closeEditDialog();
          cx(); // 刷新页面
        } else {
          ElMessage.error("更新失败，请重试！");
        }
      })
     
  };
  //转换时间格式
  function formatDate(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
}
  //编辑显示功能
  const editData = (row) => {
    editForm.caId = row.caId;
    editForm.caCellId = row.caCellId;
    editForm.caName = row.caName;
    editForm.caBrand = row.caBrand;
    editForm.caPrice = row.caPrice;
    editForm.caCount = row.caCount;
    editForm.caUserYear = row.caUserYear;
    editForm.caBuyTime = row.caBuyTime;
    editForm.caCreateTime = row.caCreateTime;
    editDialogVisible.value = true;
  };
  //点击关闭按钮
  const closeEditDialog = () => {
    editDialogVisible.value = false;
  };
  //删除按钮
  function Delete(caId) {
    console.log(caId)
  axios.delete(`/api/api/Assets?id=${caId}`)
    .then((response) => {
       if (response.status === 200) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          dialogFormVisible.value = false;
        } else {
          ElMessage({
            message: "删除失败",
            type: "waring",
          });
        }
        cx()
    })
    .catch((error) => {
      console.error(error.response.data); // 获取服务器返回的详细错误信息
      console.error(error.response.status); // 获取HTTP状态码
      console.error(error.response.statusText); // 获取HTTP状态码对应的文本描述
    });
  }
  //分页显示数量发生改变时候触发
  function handleSizeChange() {
    console.log("分页显示数量发生改变时候触发");
    cx();
  }
  //分页吗发生改变时候触发
  function handleCurrentChange() {
    console.log("分页吗发生改变时候触发");
    cx();
  }
  //查询数据和总条数
  function cx() {
    console.log("页码" + currentPage.value);
    console.log("页数" + pageSize.value);
    // 发起 GET 请求
    axios
      .get(
        `/api/api/Assets?ys=${pageSize.value}&ym=${currentPage.value}&name=${search.value}`
      )
      .then((response) => {
        filterTableData.value = response.data.data;
        zhonshul.value = response.data.totalCount;
        console.log(filterTableData.value)
      })
      .catch((error) => {
        console.error(error);
      });
  }
  function chax() {
    cx();
  }
  </script>
  <style>
  </style>
  